<template>
	<view class="article">		
		<view class="article-con" v-if="arctileObj">
			<view class="title">{{arctileObj.title}}</view>
			<view class="uni-flex list-info">
				<view class="author">
					<image :src="imgUrl + arctileObj.expertImage" v-if="arctileObj.expertImage"></image>
					<image v-else src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/avatar.png"></image>
					<text>{{arctileObj.expertName}}</text>
				</view>
				<view class="see">
					<uni-icons type="eye" color="#9498A0" size="14"></uni-icons>
					<text>{{arctileObj.browseNum}}</text>
					<uni-fav style="float: right; margin-left: 30rpx;" :checked="isFav" :circle="true" bg-color="#B4B5B7" @click="setFav(isFav)"
						bg-color-checked="rgba(255, 90, 90, 0.08)" fg-color="#ffffff" fg-color-checked="#FF5A5A" />			
				</view>
			</view>
		</view>
		<view class="summary" v-if="arctileObj.resume">
			<view class="title"><uni-icons type="calendar-filled" color="#00B5DD" size="16"></uni-icons><text style="margin-left: 15rpx;">摘要</text></view>
			<text class="con">{{arctileObj.resume}}</text>
		</view>
		<view class="art">
			<rich-text :nodes="nodes"></rich-text>
			<!-- <text>去除亲鱼：幼鱼出生后，首先要做的是去除亲鱼，对于许多鱼来说，它们不照顾其幼虫的习性，而是在极度饥饿时将它们作为食物，所以最好将亲鱼与幼虫分开，但是，并不是所有的亲鱼都需要去除，比如斗鱼，雄鱼会保护鱼卵，但要把雌鱼移走，以防被雄鱼攻击。</text>
			<image src="https://staticfile-yj.obs.myhuaweicloud.com/arcimg/art.png" mode="widthFix"></image>
			<text>喂食：由于幼鱼出生时有一些卵黄囊存在，所以第一天不需要喂食，它们只需要在吸收了卵黄囊后再喂食，由于鱼的体型较小，它们不能接受鱼饲料，只能用洄游的水或煮熟的蛋黄作为食物，需要注意的是，喂熟蛋黄时，要用纱布包好，轻轻拧入水中，如果喂多了，会破坏水质，影响鱼苗健康。</text>
			<image src="https://staticfile-yj.obs.myhuaweicloud.com/arcimg/art.png" mode="widthFix"></image>
			<text>换水时间：由于小鱼苗对水质波动极度敏感，不要轻易换水。孵化后等待一周再第一次换水很重要，而且换水量不能太大，以免刺激鱼苗。</text> -->
		</view>
	</view>
</template>

<script>
	import {
		baseurl,
		detailKnowledgeCourse,
		deleteCollection,
		addCollection
	} from "@/api/user.js";
	let imgUrl = "https://nongmao.obs.cn-north-4.myhuaweicloud.com/"
	export default {
		data() {
			return {
				isFav: false,
				parmas: '',
				arctileObj: null,
				showLoadMore: false,
				nodes: [],
				imgUrl,
			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。
			this.parmas = option.id;
			this.showLoadMore = true;
			console.log("onload", this.arctileObj)
			this.detailKnowledgeCourse(this.parmas);
		},
		onPullDownRefresh(){
			this.showLoadMore = true;
			this.detailKnowledgeCourse(this.parmas);
			uni.stopPullDownRefresh();
		},
		methods: {
			async detailKnowledgeCourse(options) {
				const res = await detailKnowledgeCourse(options);
				console.log(res)
				this.arctileObj = res.returnObj;
				if(this.arctileObj.myFavorite > 0){
					this.isFav = true
				}else{
					this.isFav = false
				}
				this.nodes = this.arctileObj.content;
				console.log("nodes", this.arctileObj.content)
				this.showLoadMore = false;
			},
			async addCollection(options){
				const res = await addCollection(options);
				if(res.success){
					uni.showToast({
						title:'收藏成功！'
					})
					this.isFav = true;
				}
			},
			
			async deleteCollection(options){
				const res = await deleteCollection(options);
				if(res.success){
					uni.showToast({
						title:'已取消收藏！'
					})
					this.isFav = false
				}
			},
			setFav() {
				let options = {
					serviceType:'2',
					serviceId:this.arctileObj.id
				}
				if(this.isFav){
					this.deleteCollection([options])
				}else{
					this.addCollection(options)
				}
				this.$forceUpdate()
			},
		}
	}
</script>

<style lang="scss">
page{
	background-image: url("https://staticfile-yj.obs.myhuaweicloud.com/course-bg.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-color: #fff;
}

.list-info .author{
	width: calc(100% - 120px);
}

.article{
	padding: 30rpx;
}

.title{
	color: #283241;
	font-size: 40rpx;
	font-weight: 500;
	line-height: 28px;
}
.summary{
	background-color: #F5F8FB;
	border-radius: 8px;
	padding:24rpx 32rpx;
	margin:30px 0;
}

.summary .title{
	font-size: 36rpx;
	line-height: 26px;
	color: #283241;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
}

.summary .con{
	line-height: 26px;
	font-size: 28rpx;
	font-weight: 400;
	color: #283241;
}

.art text{
	font-size: 28rpx;
	line-height: 26px;
}

.art image{
	max-width: 90%;
	margin: 15px auto;
	display: block;
}

</style>
